<template>
	<el-form ref="form" :model="form"   class="search searchBox">
		<el-form-item label="姓名" v-if="options.userShow">
			<el-input v-model="form.name" clearable placeholder="请输入姓名"></el-input>
		</el-form-item>
		<el-form-item label="手机号码" v-if="options.telShow">
			<el-input v-model="form.telnum" clearable placeholder="请输入电话号码"></el-input>
		</el-form-item>
		<el-form-item label="标注类型" v-if="options.tagShow">
			<el-select v-model="form.arrange" placeholder="请选择标注类型" clearable>
				<el-option label="已安排" value="1"></el-option>
				<el-option label="等待安排" value="2"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="性别" v-if="options.sexShow">
			<el-select v-model="form.sex" placeholder="请选择性别" clearable>
				<el-option label="男" value="男"></el-option>
				<el-option label="女" value="女"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="年龄" v-if="options.ageShow">
			<el-input v-model="form.age" clearable></el-input>
		</el-form-item>
		<el-form-item label="学历" v-if="options.educationShow">
			<el-select v-model="form.education" placeholder="请选择" clearable>
				<el-option v-for="(item,index) in educationList" :label="item" :value="item" :key="index"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="现住址" v-if="options.addressShow">
			<city-Cascader :citys="citys" :level="level" @handleChange="handleCityChange"></city-Cascader>
		</el-form-item>
		<el-form-item label="状态" v-if="options.workStatusShow">
			<el-select v-model="form.workStatus" placeholder="请选择状态" clearable>
				<el-option label="沟通" value="1"></el-option>
				<el-option label="通知面试" value="2"></el-option>
				<el-option label="实到面试" value="3"></el-option>
				<el-option label="通知复试" value="4"></el-option>
				<el-option label="实到复试" value="5"></el-option>
				<el-option label="录取" value="6"></el-option>
				<el-option label="到岗" value="7"></el-option>
			</el-select>
		</el-form-item>
		<!-- <el-form-item label="岗位" v-if="options.postShow">
			<el-select v-model="form.position" placeholder="请选择岗位名称" clearable>
				<el-option v-for="(item,index) in projectList" :key="index" :label="item.positionName" :value="item.positionName"></el-option>
			</el-select>
		</el-form-item> -->
		<el-form-item label="项目归属" v-if="options.projectShow" >
			<el-select v-model="form.projectBelongsId" placeholder="请选择项目"  filterable clearable @change="getLabel">
				<el-option v-for="(item,index) in list" :label="item.projectBlongs"
					:value="item.projectId" :key="index"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="招聘渠道" v-if="options.projectShow" >
			<el-select v-model="form.recruitmentChannel" placeholder="请选择项目" clearable>
				<el-option v-for="(item,index) in lists" :label="item"
					:value="item" :key="index"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="录入时间" v-if="options.entryShow">
			<el-date-picker v-model="form.startTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:200px"></el-date-picker>~
			<el-date-picker v-model="form.endTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:200px"></el-date-picker>
		</el-form-item>

		<el-form-item label="录入时间" v-if="options.entryDateShow">
			<el-date-picker v-model="startDate" @change="gettime"   start-placeholder="开始日期"
			end-placeholder="结束日期"  type="datetimerange" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:300px"></el-date-picker>
				
		</el-form-item>

		<el-form-item label="操作时间" v-if="options.operationTime">
			<el-date-picker v-model="operationTimes" @change="gettimeOpration"   start-placeholder="开始日期"
			end-placeholder="结束日期"  type="datetimerange" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:300px"></el-date-picker>
				
		</el-form-item>

		<!--  -->
		<el-form-item label="操作时间" v-if="options.startOperationTimeShow">
			<!-- <el-date-picker v-model="form.startOperationTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:170px"></el-date-picker>~
			<el-date-picker v-model="form.endPperationTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:170px"></el-date-picker> -->
		
				<el-date-picker v-model="operationTimesUser" @change="gettimeOprationUser"   start-placeholder="开始日期"
				end-placeholder="结束日期"  type="datetimerange" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" style="width:300px"></el-date-picker>
			</el-form-item>
		
		<el-form-item label="职能" v-if="options.tradeName">
			
			<el-cascader  ref="cascader" v-model="form.tradeCode" :options="workersList" clearable @change="handleChangeCode" placeholder="请选择职能"></el-cascader>
			
		</el-form-item>
		<el-form-item label="居住地" v-if="options.region">
			<el-input v-model="form.region" clearable placeholder="请输入居住地"></el-input>
		</el-form-item>
		<el-form-item label="岗位名称" v-if="options.jobName">
			<el-input v-model="form.jobName" clearable placeholder="请输入岗位名称"></el-input>
		</el-form-item>

		<el-form-item style="width:288px;text-align:center;float: right;">
			<!-- 点击查询 触发search这个方法 -->
			<el-button type="primary" size="small" @click="search()" class="searchBtn">查询</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import cityCascader from "@/component/cityCascader/index.vue";
	import cityData from "@/assets/citys.json";
	export default {
		components: {
			cityCascader
		},
		props: {
			options: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				workersList:[],
				startDate:[],
				operationTimesUser:[],
				operationTimes:[],
				form: {
					projectBelongsId:'',
					name: '', //姓名
					telnum: '', //电话号码
					arrange: '', //标注类型
					sex: '', //性别
					age: '', //年龄
					education: '', //学历
					workStatus: '', //工作状态
					position: '', //岗位
					presentAddress: '', //现住址
					projectBelongs: '', //项目归属
					startTime: '', //开始录入时间
					endTime: '', //结束录入时间
					tradeName:'',
					tradeCode:'',
					region:'',
					jobName:'',
				},
				list:[],
				lists:[],
				level: '0', //等级
				citys: [], //省市区集合
				projectList: [], //项目列表
				positionList: [], //岗位列表
				educationList: ["不限", "初中及以下", "高中", "中技", "中专", "大专", "本科", "硕士", "MBA", "博士", "其他"],
			}
		},
		created() {
			// this.getProjectList();
			this.getPositionList();
			this.getProjectBelong();
			this.getSearchList();
			this.getSearchLists()
			let workers = require('@/assets/mask/positionList.json');
			this.workersList = workers.position; //职能类型
		},
		watch:{

			operationTimesUser: function(newVal, oldVal) {
     console.log('数组发生变化：', oldVal, ' -> ', newVal)
	 if(newVal==null){
		this.form.startOperationTime='';
		this.form.endPperationTime='';
		
	 }
   },
			operationTimes: function(newVal, oldVal) {
     console.log('数组发生变化：', oldVal, ' -> ', newVal)
	 if(newVal==null){
		this.form.operateTime='';
		this.form.doneTime='';
		
	 }
   },
   startDate: function(newVal, oldVal) {
     console.log('数组发生变化：', oldVal, ' -> ', newVal)
	 if(newVal==null){
		this.form.startDate='';
		this.form.endDate='';
		
	 }
	}
		},
		methods: {
			gettimeOprationUser(){
				console.log(this.operationTimesUser);
				 
				 Object.assign(this.form, {startOperationTime: this.operationTimesUser[0],endPperationTime: this.operationTimesUser[1]})
				 console.log(this.options);
			},
			gettimeOpration(){
				console.log(this.operationTimes);
				 
				 Object.assign(this.form, {operateTime: this.operationTimes[0],doneTime: this.operationTimes[1]})
				 console.log(this.options);
			},
			gettime(){
				 console.log(this.startDate);
				 this.options.startDate = this.startDate[0]
				 Object.assign(this.form, {startDate: this.startDate[0],endDate: this.startDate[1]})
				 console.log(this.options);
				 
			},
			handleChangeCode(data){
				if(data.length==0){
					return this.form.tradeName=''
				}
			console.log(data);	
			  console.log(this.$refs["cascader"].getCheckedNodes()[0].label)
			  this.form.tradeName=this.$refs["cascader"].getCheckedNodes()[0].label
			},
			
			getLabel(data){
				console.log(data);
				this.list.forEach(res=>{
					if(data+''==res.projectId){
						console.log(res);
						this.form.projectBelongs=res.projectBlongs
						console.log(this.form.projectBelongs);
					}
				})
				if(data==''||data==undefined){
					this.form.projectBelongs=''
				}
			},
			
			getSearchLists(mark){
				let data = {}
					let url='/v1/librarian/recruitmentChannelList'
				
				this.$telAxios.get(url,data).then(res=>{
					this.lists=res.data.data
				})
			},
			getSearchList(mark) {
				let data = {}
				
				let  url = '/v1/librarian/projectBelongsList'
				this.$telAxios.get(url, data).then(res => {
					this.list = res.data.data
				})
			},
			//条件查询
			search() {
				let params = {};
				for (let i in this.form) {
					if (this.form[i]) {
						params[i] = this.form[i];
					}
				}
				if (params.startTime && params.endTime && Date.parse(params.startTime) > Date.parse(params.endTime)) {
					this.$message({
						message: "结束时间不能早于开始时间",
						type: "warning"
					});
					return false;
				}
				this.$emit('searchList', params);
			},
			//清除数据
			clearData() {
				this.form = {
					name: '', //姓名
					telnum: '', //电话号码
					arrange: '', //标注类型
					sex: '', //性别
					age: '', //年龄
					education: '', //学历
					workStatus: '', //工作状态
					position: '', //岗位
					presentAddress: '', //现住址
					projectBelongs: '', //项目归属
					startTime: '', //开始录入时间
					endTime: '', //结束录入时间
				}
			},
			//获取项目列表
			getProjectList() {
				this.$telAxios.post('/v1/librarian/selectProjectListByProjectName', {}).then(res => {
					console.log(res);
					if (res.data.code === 1000) {
						let result = res.data.data;
						this.projectList = result;
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			},
			getProjectBelong() {
				let data = {
					pageNum: '1',
					pageSize: '10',
				}
				this.$telAxios.post('v1/librarian/selectProjectByList', data).then(res => {
					this.projectList = res.data.data.plist
				})
			},
			//获取岗位列表
			getPositionList() {
				this.$telAxios.post('/v1/librarian/selectPositionList').then(res => {
					console.log(res);
					if (res.data.code === 1000) {
						let result = res.data.data;
						this.positionList = result;
					} else {
						// this.$message({
						// 	message: res.data.message,
						// 	type: 'warning'
						// })
					}
				})
			},
			//选择城市
			handleCityChange(val) {
				console.log(val);
				this.citys = val;
				this.cityConvert(val);
			},
			//城市转换,将城市编号转换为城市名
			cityConvert(val) {
				let citys = cityData.city;
				let str = val[0] + '';
				if (str == 'NaN') {
					this.form.presentAddress = '';
					this.citys = [];
					return false
				};
				citys.forEach(item => {
					if (item.code === val[0]) {
						this.form.presentAddress = item.name;
						item.subLevelModelList.forEach(item1 => {
							if (item1.code === val[1]) {
								this.form.presentAddress = this.form.presentAddress + '-' + item1.name;
								item1.subLevelModelList.forEach(item2 => {
									if (item2.code === val[2]) {
										this.form.presentAddress = this.form.presentAddress + '-' +
											item2.name;
									}
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	/deep/ .demo-ruleForm .el-form-item__label, .el-form-item__label {
    text-align: left;
    width: 80px;
}
	.search {
		margin-top: 20px;
		width: 100%;
	}

	.formItemBox {
		width: 100%;
	}

	.el-form-item {
		width: 400px;
		float: left;
	}

	.searchBtn {
		width: 100px;
	}

	.searchBox {
		padding: 0 30px;
		overflow: hidden;
	}
</style>
